<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>超赞的手风琴CSS3和jQuery面板界面设计</title>
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
	<link href='http://fonts.useso.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
	<!--容器-->
	<section class="strips">
		<!--article代表每一个小部分-->
	  <article class="strips__strip">
	    <div class="strip__content">
	      <h1 class="strip__title" data-name="Lorem">Awesome</h1>
	      <div class="strip__inner-text">
	        <header class="htmleaf-header">
				<h1>超赞的CSS3和jQuery手风琴面板界面设计 <span>A Awesome CSS&jQuery Accordion Panel Design</span></h1>
			</header>
	      </div>
	    </div>
	  </article>
	  <article class="strips__strip">
	    <div class="strip__content">
	      <h1 class="strip__title" data-name="Ipsum">Words</h1>
	      <div class="strip__inner-text">
	        <h2>Ettrics</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
	        <p>
	          <a href="#" target="_blank"><i class="fa fa-qq"></i></a>
	        </p>
	      </div>
	    </div>
	  </article>
	  <article class="strips__strip">
	    <div class="strip__content">
	      <h1 class="strip__title" data-name="Dolor">Go</h1>
	      <div class="strip__inner-text">
	        <h2>Ettrics</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
	        <p>
	          <a href="#" target="_blank"><i class="fa fa-weibo"></i></a>
	        </p>
	      </div>
	    </div>
	  </article>
	  <article class="strips__strip">
	    <div class="strip__content">
	      <h1 class="strip__title" data-name="Sit">Inside</h1>
	      <div class="strip__inner-text">
	        <h2>Ettrics</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
	        <p>
	          <a href="#" target="_blank"><i class="fa fa-weixin"></i></a>
	        </p>
	      </div>
	    </div>
	  </article>
	  <article class="strips__strip">
	    <div class="strip__content">
	      <h1 class="strip__title" data-name="Amet">Here</h1>
	      <div class="strip__inner-text">
	        <h2>Ettrics</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
	        <p>
	          <a href="#" target="_blank"><i class="fa fa-leaf"></i></a>
	        </p>
	      </div>
	    </div>
	  </article>
	  <i class="fa fa-close strip__close"></i>
	</section>
	
	<script src="js/jquery.js" type="text/javascript"></script>
	<!--<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>-->
	<script>
	var Expand = function () {
	    var tile = $('.strips__strip');
	    var tileLink = $('.strips__strip > .strip__content');
	    var tileText = tileLink.find('.strip__inner-text');
	    var stripClose = $('.strip__close');
	    var expanded = false;
	    var open = function () {
	        var tile = $(this).parent();
	        if (!expanded) {
	            tile.addClass('strips__strip--expanded');
							// transition: property duration timing-function delay;
							
							// 值	描述
							// transition-property	规定设置过渡效果的 CSS 属性的名称。
							// transition-duration	规定完成过渡效果需要多少秒或毫秒。
							// transition-timing-function	规定速度效果的速度曲线。
							// transition-delay	定义过渡效果何时开始。
	            tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
	            stripClose.addClass('strip__close--show');
	            stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
	            expanded = true;
	        }
	    };
	    var close = function () {
	        if (expanded) {
	            tile.removeClass('strips__strip--expanded');
							// cubic-bezier 又称三次贝塞尔，主要是为 animation 生成速度曲线的函数，
							// 规定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。
	            tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
	            stripClose.removeClass('strip__close--show');
	            stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)');
	            expanded = false;
	        }
	    };
	    var bindActions = function () {
	        tileLink.on('click', open);
	        stripClose.on('click', close);
	    };
	    var init = function () {
	        bindActions();
	    };
	    return { init: init };
	}();
	Expand.init();
	</script>
</body>
</html>